<template>
  <div>
    <van-form @submit="onSubmit" @failed="failed">
      <!--      意向岗位-->
      <div class="input">
        <label>意向岗位</label>
        <van-field
          v-model="desired_position"
          name="desired_position"
          placeholder="请填写意向岗位"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_desired_position_model = !show_desired_position_model"
        />
        <van-popup v-model="show_desired_position_model" round position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="期望的岗位"
            show-toolbar
            :columns="desired_position_list"
            @confirm="desired_position_onConfirm"
          />
        </van-popup>
      </div>
      <!--      工作地区-->
      <div class="input">
        <label>工作地区</label>
        <!--        <van-cell is-link @click="show = !show">展示弹出层</van-cell>-->
        <van-field
          v-model="work_area"
          name="work_area"
          placeholder="请填写意向岗位"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_work_area_model = !show_work_area_model"
        />
        <van-popup v-model="show_work_area_model" round position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="工作地区"
            show-toolbar
            :columns="work_area_list"
            @confirm="work_area_onConfirm"
          />
        </van-popup>
      </div>
      <!--      期望的行业-->
      <div class="input">
        <label>期望从事的行业</label>
        <!--        <van-cell is-link @click="show = !show">展示弹出层</van-cell>-->
        <van-field
          v-model="desired_industry"
          name="desired_industry"
          placeholder="请填写意向岗位"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_desired_industry_model = !show_desired_industry_model"
        />
        <van-popup v-model="show_desired_industry_model" round position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="期望的行业"
            show-toolbar
            :columns="desired_industry_list"
            @confirm="desired_industry_onConfirm"
            @cancel="desired_industry_cancel"
          />
        </van-popup>
      </div>
      <!--      期望的薪资-->
      <div class="input">
        <label>期望薪资</label>
        <!--        <van-cell is-link @click="show = !show">展示弹出层</van-cell>-->
        <van-field
          v-model="expect_salary"
          name="expect_salary"
          placeholder="请填写意向岗位"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_expect_salary_model = !show_expect_salary_model"
        />
        <van-popup v-model="show_expect_salary_model" round position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="期望薪资"
            show-toolbar
            :columns="expect_salary_list"
            @confirm="expect_salary_onConfirm"
            @cancel="expect_salary_cancel"
          />
        </van-popup>
      </div>
      <!--      自我评价-->
      <div class="input">
        <div class="content">
          <p class="text">自我评价</p>
          <van-field
            v-model="self_assessment"
            name="self-assessment"
            type="textarea"
            placeholder="您可以对自己做一些评价..."
            maxlength="250"
            show-word-limit
            class="self_assessment"
          >
          </van-field>
        </div>
      </div>
      <van-button native-type="submit" round type="default" style="width: 100%; margin-top: 30px;" :class="{'btn_active': btn_active}">下一步</van-button>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'form2-content',
  data () {
    return {
      desired_position: '',
      work_area: '',
      desired_industry: '',
      expect_salary: '',
      self_assessment: '',
      show_desired_position_model: false,
      show_work_area_model: false,
      show_desired_industry_model: false,
      show_expect_salary_model: false,
      btn_active: true,
      desired_position_list: ['销售', '公务员', '教师', '飞行员', '程序员'],
      desired_industry_list: ['金融', '计算机', '会计', '事业单位', '其它'],
      expect_salary_list: ['1000～2000元', '3000～5000元', '5000以上', '8000以上', '面议'],
      work_area_list: ['北京', '上海', '重庆', '深圳', '成都']
    }
  },
  methods: {
    onSubmit (obj) {
      this.$store.dispatch('userInfo', obj)
      this.$router.push('/page3')
      this.$store.state.active++
    },
    failed () {
      this.$Notify({type: 'warning', message: '请填写完整的信息'});
    },
    desired_position_onConfirm (value) {
      this.desired_position = value
      this.show_desired_position_model = false
    },
    desired_industry_onConfirm (value) {
      this.desired_industry = value
      this.show_desired_industry_model = false
    },
    desired_industry_cancel () {
      this.show_desired_industry_model = false
    },
    work_area_onConfirm (value) {
      this.work_area = value
      this.show_work_area_model = false
    },
    expect_salary_onConfirm (value) {
      this.show_expect_salary_model = false
      this.expect_salary = value
    },
    expect_salary_cancel () {
      this.show_expect_salary_model = false
    }

  }
}
</script>

<style lang="scss" scoped>
.input {
  border-bottom: 0.5px dashed #cccccc;
  margin-top: 8px;

  label {
    color: #353535;
    font-size: 14px;
    padding-left: 16px;

    &::after {
      content: '*';
      color: red;
    }
  }

  &.job_status {
    .job_status_group {
      display: flex;
      justify-content: flex-start;

      .job_status_item {
        padding: 8px 0;
      }
    }
  }

  .content {
    padding: 10px 16px;

    .text {
      color: #353535;
      font-size: 14px;
    }

    .self_assessment {
      margin-top: 10px;
      text-indent: 1em;
      line-height: 1.4em;
      color: #a3a8b2;
      border: 3px solid #e5e9ee;
      border-radius: 5px;
    }
  }
}

.btn_active {
  background-color: #59c262;
  color: #ffffff;
}
</style>
